<template>
	<view>
		<view class="recommend">
			<view class="recommend-con">
				<view class="recommend-con-top" @click="navSecKill(banner)" v-if="banner.subtitle == undefined">
					<image src="https://res.suning.cn/project/passport/login/wapV8/images/icon_epp.png" mode=""></image>
					<text>{{banner.text}}推荐</text>
					<view>{{banner.link}}</view>
				</view>
				<view class="recommend-img" v-for="(item,index) in bannerImg" :key="index" v-if="status == 3" @click="navSecKillDetail(item)">
					<view class="content">
						<view class="row">
							<view class="banner-on">
								<image class="row-img" :src="item.img" mode=""></image>
							</view>						
						</view>
						<view class="row">
							<view class="banner-lg" v-for="(item1,index1) in item.row" :key="index1">
								<image :src="item1.image" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="recommend-img" v-for="(item,index) in bannerImg" :key="index" v-if="status != 3">
					<view class="otherRow">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		name: 'item-recommend',
		props: {
			banner: {},
			bannerImg: {
				type: Array,
				deault: function() {
					return []
				}
			},
			status: ''
		},
		data() {
			return {


			}
		},
		methods: {
			navSecKill() {
				// this.$jump('/pages/tabs/index/meetingplace?id='+val.id)
				// console.log('好物推荐')
				uni.navigateTo({
					url: '/pages/recomd/list'
				})
			},
			//好物详情页
			navSecKillDetail(item) {
				let id = item.secKillProductUuid;
				uni.navigateTo({
					url: '/pages/recomd/detail'
				})
			},

		}
	}
</script>

<style lang="scss">
	.recommend {
		width: 100%;
		height: auto;
		border-radius: 20rpx;
		background-color: #fff;
		margin: 20rpx 0;

		.recommend-con {
			padding: 0 13rpx;

			.recommend-con-top {
				display: flex;
				padding: 24rpx 0;
				align-items: center;

				image {
					width: 35rpx;
					height: 35rpx;
				}

				text {
					font-size: 34rpx;
					color: #333;
					width: 100%;
					padding: 0 0 0 10rpx;
				}

				view {

					width: 75rpx;
					// height: 30rpx;
					line-height: 30rpx;
					border: 1rpx solid #ccc;
					border-radius: 30rpx;
					font-size: 18rpx;
					text-align: center;
					color: #ccc;
				}
			}

			.recommend-img {
				width: 100%;
				height: 413rpx;
				overflow: hidden;

				.otherRow {
					width: 100%;
					height: 200rpx;
					border-radius: 16rpx;
					margin-bottom: 20rpx;
				}

				.otherRow:last-child {
					margin-bottom: 0;
				}

				.content {
					height: 393rpx;
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					justify-content: space-between;

					.row {
						display: flex;
						flex-wrap: wrap;
						width: 49%;
						height: 100%;

						.banner-on {
							width: 100%;
							height: 388rpx;
						}

						.banner-lg {
							width: 100%;
							height: 189rpx;
						}

						image {
							width: 100%;
							height: 100%;
							display: block;
							border-radius: 15rpx;
						}


					}
				}

			}
		}
	}
</style>
